<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增角色')" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-add">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">角色名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="roleName" id="roleName" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<select id="status" name="status" class="form-control m-b">
						<option value="1">开启</option>
						<option value="0">关闭</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">菜单权限：</label>
				<div class="col-sm-8">
					<label class="check-box">
						<input type="checkbox" value="1">展开/折叠</label>
					<label class="check-box">
						<input type="checkbox" value="2">全选/全不选</label>
					<label class="check-box">
						<input type="checkbox" value="3" checked>父子联动</label>
					<div id="menuTrees" class="ztree ztree-border"></div>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: ztree-js" />
	<script type="text/javascript">

		$("#form-add").validate({
			rules:{
				onkeyup: false,
				roleName:{
					required:true,
				}
			},
			messages: {
		        "roleName": {
					required: "请输入"
		        }
		    },
		    focusCleanup: true
		});
		

		function submitHandler() {
			if ($.validate.form()) {
				var data = $('#form-add').serializeJson();
				data.menuIds = $.tree.getCheckedNodes();
				$.operate.save(ctx + "sys/role/insert", data ,null,true);
			}
		}

		$(function() {
			// var url = ctx + "system/menu/loadAllMenu?roleId=" + $("#id").val();
			var url = ctx + "sys/menu/loadAllMenu?roleId=";
			var options = {
				id: "menuTrees",
				url: url,
				check: { enable: true},
				expandLevel: 0,
				data: {
					key: {
						title: "title"         // 节点数据保存节点提示信息的属性名称
					},
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "parentMenuId"
					}
				}
			};
			$.tree.init(options);
			setTimeout(function () {
				$._tree.expandAll(false);
			},500)

		});

		$('input').on('ifChanged', function(obj){
			var type = $(this).val();
			var checked = obj.currentTarget.checked;
			if (type == 1) {
				if (checked) {
					$._tree.expandAll(true);
				} else {
					$._tree.expandAll(false);
				}
			} else if (type == "2") {
				if (checked) {
					$._tree.checkAllNodes(true);
				} else {
					$._tree.checkAllNodes(false);
				}
			} else if (type == "3") {
				if (checked) {
					$._tree.setting.check.chkboxType = { "Y": "ps", "N": "ps" };
				} else {
					$._tree.setting.check.chkboxType = { "Y": "", "N": "" };
				}
			}
		})

	</script>
</body>
</html>
